<%@page contentType="text/html;charset=utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>用户注册 - 当当网</title>
		<link href="../css/login.css" rel="stylesheet" type="text/css" />
		<link href="../css/page_bottom.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="../js/prototype-1.6.0.3.js">
		</script>
		<script type="text/javascript">
			var submitStatus = {email:false,password:false,name:false,number:false};
			
			function checkSubmit(f) {
				var ok = submitStatus.email && submitStatus.password && submitStatus.name && submitStatus.number;
				if(ok) {
					f['submit'].disabled = false;
				}else {
					f['submit'].disabled = true;
				}
			}
			
			function validateEmail(f) {
				var re = /^[a-z]([a-z0-9]*[-_]?[a-z0-9]+)*@([a-z0-9]*[-_]?[a-z0-9]+)+[\.][a-z]{2,3}([\.][a-z]{2})?$/i;
				if (!re.test(f['user.email'].value)) {
                    submitStatus.email = false;
                    $('email.info').style.color='red';
                    $('email.info').innerHTML = "email格式不正确";
                    checkSubmit(f);
                } else {
                	new Ajax.Request('validateemail.action?email='+f['user.email'].value,
                		{method:'get',onSuccess:function(req){
                		var re = req.responseText.evalJSON().ok;
                		submitStatus.email = re;
                		checkSubmit(f);
                		if(re) {
                			$('email.info').innerHTML = "email可以使用";
                			$('email.info').style.color='green';
                		} else {
                			 $('email.info').style.color='red';
                			 $('email.info').innerHTML = "email已经占用";
                		}
                	}});
                }
			}
			
			function validatePassword(f) {
				if(f['user.password'].value.length<6) {
					submitStatus.password = false;
					$('password.info').innerHTML = "密码必须大于6位";
				}else if(f['user.password'].value!=f['user.password1'].value){
					submitStatus.password = false;
					$('password1.info').innerHTML = "两次输入的密码必须一致";
				} else {
					submitStatus.password = true;
					$('password.info').innerHTML = "";
					$('password1.info').innerHTML = "";
				}
				checkSubmit(f);
			}
			
			function validateName(f) {
				if(f['user.name'].value.length<5) { 
					submitStatus.name = false;
				
					$('name.info').innerHTML = "昵称必须大于5位";
				} else {
					submitStatus.name = true;
					$('name.info').innerHTML = "";
				}
				checkSubmit(f);
			}
			
			function validateNumber(f) {
				new Ajax.Request('checknumber.action?number='+f['number'].value,
                	{method:'get',onSuccess:function(req){
                		var re = req.responseText.evalJSON().ok;
                		submitStatus.number = re;
                		
                		checkSubmit(f);
                		
                		if(re) {
                			$('number.info').style.color = "green";
                			$('number.info').innerHTML = "验证码正确";
                		} else {
                			$('number.info').style.color = "red";
                			$('number.info').innerHTML = "验证码错误";
                			$('imgVcode').src='generatenumber.action?'+(new Date()).getTime();
                		}
                }});
			}
		</script>
	</head>
	<body>
		<%@include file="../common/head1.jsp"%>
		<div class="login_step">
			注册步骤:
			<span class="red_bold">1.填写信息</span> > 2.验证邮箱 > 3.注册成功
		</div>
		<div class="fill_message">
			<form name="ctl00" method="post" action="register.action" id="f">
				<h2>
					以下均为必填项
				</h2>
				<table class="tab_login">
					<tr>
						<td valign="top" class="w1">
							请填写您的Email地址：
						</td>
						<td>
							<input name="user.email" type="text" id="txtEmail"
								class="text_input" onblur="validateEmail($('f'))" />
							<div class="text_left" id="emailValidMsg">
								<p>
									请填写有效的Email地址，在下一步中您将用此邮箱接收验证邮件。
								</p>
								<span id="email.info" style="color: red"></span>
							</div>
						</td>
					</tr>
					<tr>
						<td valign="top" class="w1">
							设置您在当当网的昵称：
						</td>
						<td>
							<input name="user.name" type="text" id="txtNickName"
								class="text_input"
								onblur="setTimeout(function(){validateName($('f'))},10)" />
							<div class="text_left" id="nickNameValidMsg">
								<p>
									您的昵称可以由小写英文字母、中文、数字组成，
								</p>
								<p>
									长度4－20个字符，一个汉字为两个字符。
								</p>
								<span id="name.info" style="color: red"></span>
							</div>
						</td>
					</tr>
					<tr>
						<td valign="top" class="w1">
							设置密码：
						</td>
						<td>
							<input name="user.password" type="password" id="txtPassword"
								class="text_input" onblur="validatePassword($('f'))" />
							<div class="text_left" id="passwordValidMsg">
								<p>
									您的密码可以由大小写英文字母、数字组成，长度6－20位。
								</p>
								<span id="password.info" style="color: red"></span>
							</div>
						</td>
					</tr>
					<tr>
						<td valign="top" class="w1">
							再次输入您设置的密码：
						</td>
						<td>
							<input name="user.password1" type="password" id="txtRepeatPass"
								class="text_input" onblur="validatePassword($('f'))" />
							<div class="text_left" id="repeatPassValidMsg">
								<span id="password1.info" style="color: red"></span>
							</div>
						</td>
					</tr>
					<tr>
						<td valign="top" class="w1">
							验证码：
						</td>
						<td>
							<img class="yzm_img" id='imgVcode' src="generatenumber.action" />
							<input name="number" type="text" id="txtVerifyCode"
								class="yzm_input" onblur="validateNumber($('f'))" />
							<div class="text_left t1">
								<p class="t1">
									<span id="vcodeValidMsg">请输入图片中的四个字母。</span>

									<span id="number.info" style="color: red"></span>
									<a href="javascript:;"
										onclick=
	$('imgVcode').src = 'generatenumber.action?' + (new Date()).getTime();
>看不清楚？换个图片</a>
								</p>
							</div>
						</td>
					</tr>
				</table>

				<div class="login_in">

					<input id="btnClientRegister" class="button_1" name="submit"
						type="submit" value="注 册" disabled="disabled" />
				</div>
			</form>
		</div>
		<%@include file="../common/foot1.jsp"%>
	</body>
</html>

